<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        我是 {{obj.name}} 今年 {{obj.age}} 岁了
        {{str}}
        <button @click="setMsg">修改按钮</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {ref, createApp} = Vue;
        createApp({
            setup() {
                // ref 是返回响应式数据 既可以是对象 也可以是基本数据类型
                const obj = ref({
                    name: 'lisi',
                    age: 12
                })

                const str = ref("hello Vue");
                // ref 在获取内部(javascript内)的值的时候需要加上 value 因为 ref 是响应式对象 所以不能直接获取 不过在 script 外部就不需要添加 value
                const setMsg = () => {
                    str.value = '我是修改后的 Vue';
                    obj.value.age = 20;
                    obj.value.name = 'xxx wwww';
                }
                return {
                    obj,
                    str,
                    setMsg
                }

            }
        }).mount("#app")
    </script>
</body>
</html>